<template>
  <div style="height:100%">
    <breadcrumb :breadList="breadList" :name="name" style="margin-bottom: 12px;" v-if="$route.query.type !== 'detail'">
      <!-- <div class="handle-box" slot="handleContent">
        <div class="handle-btn">
          <a-button class="common-btn">保存</a-button>
        </div>
        <div class="handle-btn">
          <a-button class="common-btn" @click="cancel">取消</a-button>
        </div>
      </div> -->
    </breadcrumb>
    <a-card class="card" title="设备基本信息" :bordered="false">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="所属企业" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.companyName', {initialValue: currentPro.companyName, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="设备类型" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-select :disabled="disabled" v-decorator="['queryParam.type', {initialValue: currentPro.equipmentType, rules: [{required: false, message: ''}]}]" style="width: 270px;">
                <a-select-option value="1">节能款</a-select-option>
                <a-select-option value="2">加湿款</a-select-option>
                <a-select-option value="3">轻奢节能款</a-select-option>
                <a-select-option value="4">WIFI款</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="设备名称" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.equipmentName', {initialValue: currentPro.equipmentName, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="设备品牌" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input-number :disabled="disabled" v-decorator="['queryParam.brand', {initialValue: currentPro.equipmentBrand, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="设备参数" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.paramers', {initialValue: currentPro.equipmentparamers, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="$route.query.type !== 'detail'">
          <div style="text-align:center;">
            <a-button class="common-btn" @click="submitProMessage">提交</a-button>
            <a-button @click="cancel" class="common-btn" style="margin-left:10px;">取消</a-button>
          </div>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import GlobalHeader from '@/components/GlobalHeader'
import Breadcrumb from '@/components/tools/Breadcrumb'
import Cascader from 'ant-design-vue/lib/cascader'
export default {
  name: 'AddSupplier',
  components: {
    GlobalHeader,
    Breadcrumb,
    'a-cascader': Cascader
  },
  data () {
    return {
      name: '',
      breadList: [],
      code: '供应商编号：010-888888',
      queryParam: {},
      disabled: false,
      isShow: true,
      currentType: '', // 当前页面所属
      currentPro: {}, // 当前产品详情
      form: this.$form.createForm(this),
      headers: {
        authorization: 'authorization-text'
      },
      options: [{
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [{
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [{
            value: 'xihu',
            label: 'West Lake'
          }]
        }]
      }, {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [{
          value: 'nanjing',
          label: 'Nanjing',
          children: [{
            value: 'zhonghuamen',
            label: 'Zhong Hua Men'
          }]
        }]
      }]
    }
  },
  created () {
    this.getBreadCrumb()
    this.currentType = this.$route.query.type
    this.currentPro = JSON.parse(this.$route.query.proDetails)
    console.log('当前详情', this.currentType, this.currentPro)
    this.getBreadCrumb()
    if (this.$route.query.type !== 'create' && this.$route.query.type !== 'modify') {
      this.disabled = true
      this.isShow = false
    } else {
      this.disabled = false
      this.isShow = true
    }
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
      switch (this.$route.query.type) {
        case 'detail':
          this.breadList[2].meta.title = '设备详情'
          break
        case 'modify':
          this.breadList[2].meta.title = '编辑设备'
          break
        default:
          this.breadList[2].meta.title = '添加设备'
          break
      }
    },
    onChange (value) {
      console.log(value)
    },
    cancel () {
      const that = this
      this.$confirm({
        title: '是否确定取消，取消后数据将清空',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          that.$success({
            title: '已取消'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.spec-row {
  margin-left: -16px;
}
.spec-item {
  margin-bottom: 0px;
}
</style>
